import styles from '../index.less';
import React, { useState, useEffect, memo } from 'react';
import kls from 'classnames';
import { Table } from 'antd';
// import { useSelector } from 'umi';
// import { listAllSafetyIndex, listSafetyIndexById } from '@/services/bimServices';
import { CaretRightOutlined } from '@ant-design/icons';
import { Collapse } from 'antd';
const { Panel } = Collapse;
const data = [
  // {
  //   title: '地磅数据',
  //   key: '001',
  // },
  // {
  //   title: '水泥混凝土数据',
  //   key: '002',
  // },
  // {
  //   title: '运输车轨迹',
  //   key: '003',
  // },
  {
    title: '压浆数据',
    key: '004',
  },
  {
    title: '张拉数据',
    key: '005',
  },
  {
    title: '混凝土抗压强度',
    key: '006',
  },
  {
    title: '水泥胶砂抗压抗折',
    key: '007',
  },
  {
    title: '水泥砂浆立方体抗压',
    key: '008',
  },
  {
    title: '钢筋原材性能',
    key: '009',
  },
  {
    title: '钢筋焊接接头性能',
    key: '010',
  },
  {
    title: '钢筋连接接头性能',
    key: '011',
  },
  {
    title: '孔道压浆抗压抗折',
    key: '012',
  },
];

const table = {
  '006': {
    dataSource: [
      {
        key: '1',
        name: '2021/5/7',
        age: '150mm*150mm*150mm',
        address: '',
      },
      {
        key: '2',
        name: '2021/5/8',
        age: '150mm*150mm*150mm',
        address: '',
      },
      {
        key: '3',
        name: '2021/5/8',
        age: '150mm*150mm*150mm',
        address: '',
      },
    ],
    columns: [
      {
        title: '编号',
        dataIndex: 'key',
        key: 'key',
        align: 'center',
      },
      {
        title: '试验时间',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: '试件尺寸',
        dataIndex: 'age',
        key: 'age',
      },
      {
        title: '试验结果',
        dataIndex: 'address',
        key: 'address',
      },
    ],
  },
  '007': {
    dataSource: [
      {
        key: '1',
        name: '2021/5/7',
        age: '52.5',
        address: '合格',
      },
      {
        key: '2',
        name: '2021/5/8',
        age: '52.5',
        address: '合格',
      },
      {
        key: '3',
        name: '2021/5/8',
        age: '42.5',
        address: '合格',
      },
    ],
    columns: [
      {
        title: '编号',
        dataIndex: 'key',
        key: 'key',
        align: 'center',
      },
      {
        title: '试验时间',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: '设计强度',
        dataIndex: 'age',
        key: 'age',
      },
      {
        title: '试验结果',
        dataIndex: 'address',
        key: 'address',
      },
    ],
  },
  '009': {
    dataSource: [
      {
        key: '1',
        name: '2021/5/7',
        age: '预制箱梁、桥梁结构',
        address: '合格',
      },
      {
        key: '2',
        name: '2021/5/8',
        age: '预制箱梁、桥梁结构',
        address: '合格',
      },
      {
        key: '3',
        name: '2021/5/8',
        age: '42.5',
        address: '合格',
      },
    ],
    columns: [
      {
        title: '编号',
        dataIndex: 'key',
        key: 'key',
        align: 'center',
      },
      {
        title: '试验时间',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: '其他位置',
        dataIndex: 'age',
        key: 'age',
      },
      {
        title: '试验结果',
        dataIndex: 'address',
        key: 'address',
      },
    ],
  },
};

const Right = () => {
  // const curProjId = useSelector(store => store.app.curProjId);
  const renderPanel = () => {
    return data.map(item => {
      const key = item.key;
      return (
        <Panel header={item.title} key={item.key}>
          {table[key] ? (
            <Table
              dataSource={table[item.key].dataSource}
              columns={table[item.key].columns}
              size={'small'}
              pagination={false}
            />
          ) : (
            <div style={{ color: '#fff', textAlign: 'center' }}>暂无数据</div>
          )}
        </Panel>
      );
    });
  };

  return (
    <div className={kls(styles.qualityAndSafetyR)}>
      <div className="side-panel2" style={{ top: 144, right: 24 }}>
        <div className="side-panel2-title">实时数据</div>
        <div
          className={kls(
            'side-panel2-body auto-height-side-panel',
            // styles.autoHeightPanel,
            styles.collapse,
          )}
          style={{ paddingRight: 12 }}
        >
          <Collapse
            defaultActiveKey={['006']}
            ghost
            expandIconPosition={'right'}
            expandIcon={({ isActive }) => (
              <CaretRightOutlined
                style={{
                  color: !isActive ? 'rgba(255, 255, 255, 0.45)' : 'rgba(255, 255, 255, 1)',
                }}
                rotate={isActive ? 90 : 270}
              />
            )}
          >
            {renderPanel()}
          </Collapse>
        </div>
      </div>
    </div>
  );
};

export default Right;
